<template>
  <div class="managebox">
    <div class="bar_box">
    <Bar/>
    </div>
    <div class="content_box">
      <el-tabs type="border-card"  tab-position="left" v-model="activeName"  @tab-click="handleClick">
        <el-tab-pane name="first">
          <span slot="label">
            <img src="../assets/userManage@1x.png" alt="" class="usermanage_img">
            <span>用户管理</span>
          </span>
          <UserManage/>
        </el-tab-pane>
        <el-tab-pane   name="second">
          <span slot="label">
            <img src="../assets/ariticleManage@1x.png" alt="" class="aritle_manage_img">
            <span>文章管理</span>
          </span>
          <AriticleManager/>
        </el-tab-pane>
         <el-tab-pane   name="third">
          <span slot="label">
            <img src="../assets/wordManager.png" alt="" class="aritle_manage_img">
            <span>单词管理</span>
          </span>
          <WordManager/>
        </el-tab-pane>
          <el-tab-pane   name="forth">
          <span slot="label">
            <img src="../assets/wordManager (2).png" alt="" class="aritle_manage_img">
            <span>背单词榜</span>
          </span>
          <Echarts/>
        </el-tab-pane>
      </el-tabs>
    </div>
     <div class="buttom"><ButtomBox/></div>
  </div>
 
</template>

<script>
import ButtomBox from '../components/ButtomBox.vue'
import Bar from '../components/Bar.vue'
import UserManage from '../components/UserManage.vue'
import WordManager from '../components/WordManager.vue'
import AriticleManager from '../components/AriticleManager.vue'
import Echarts from '../components/Echarts.vue'
export default {
  name: 'Manager',
  components:{
    ButtomBox,Bar,UserManage,WordManager,AriticleManager,Echarts
  },
  created(){
    if(this.$route.params.activeName)
    this.activeName = this.$route.params.activeName
    else{
      if(localStorage.getItem('activeName')== 'first'|| localStorage.getItem('activeName')== 'second'|| localStorage.getItem('activeName')== 'third'||localStorage.getItem('activeName')== 'forth')
       this.activeName =  localStorage.getItem('activeName')
      else{
         this.activeName = 'first'
      }
    }
  },
  data() {
    return {
      tabPosition:'left',
      activeName:'first'
    }
  },
  methods:{
     handleClick(tab, event) {
        console.log('1',tab, event);
        localStorage.setItem('activeName',this.activeName)
      }
  }
}
</script>

<style>
.el-tab{
  width: 10vw!important;
}
.usermanage_img{
  width: 1.5vw;
  height: 1.5vw;
}
.aritle_manage_img{
  width: 1.5vw;
  height: 1.5vw;

}
.content_box{
  height: 85vh;
  width: 100vw;
 padding-top: 2vh;
}
</style>